<template>
   <div>
        <Modal :closable="closable" ref="modal" v-model="modal2" width="950">
            <div slot="header" style="color:#f60;text-align:center;height:38px">
                <Row :gutter="7" type="flex">
                    <Col span="4">
                        <Select value="1" filterable>
                            <Option  value="1">按 - 名称</Option>
                        </Select>
                    </Col>
                    <Col span="20">
                        <Row :gutter="10">
                            <Col span="21">
                                <Input placeholder="按达人名称搜索" search @on-search="search" v-model="params.searchKeyword" />
                            </Col>
                            <Col span="3">
                                <Button style="width: 80px" size="large" type="primary" @click="search">查询</Button>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </div>
            <div style="text-align:center">
                <div class="goods-list-wrapper" ref="goodsList">
                    <Table :loading="loading" :height="table_h" :border="false" :columns="goodsManagerCol" :data="goodsManagerData">
                        <div slot="header" class="table-header">
                            <Row type="flex" justify="space-between">
                                <strong>商品列表</strong>
                            </Row>
                        </div>
                        <div slot="footer">
                            <Row type="flex" justify="center" align="middle">
                                    <Page :total="pageTotal * 10" @on-change="pageChange" show-elevator />
                                <!-- <Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col> -->
                            </Row>
                        </div>
                    </Table>
                </div>
            </div>
            <div slot="footer">
                <div>
                    <Row type="flex" v-show="goodsManagerSelect.length" class="img-row">
                        <draggable class="drag" v-model="goodsManagerSelect" :options="{animation: 150}">
                            <div class="goodsSelect-img" v-for="(item,index) in goodsManagerSelect" :key="index">
                                <img :src="item.author_portrait" alt="" width="50" height="50">
                                <span @click="removeOne(index)" class="remove ivu-btn-primary">x</span>
                            </div>
                        </draggable>
                    </Row> 
                </div>
                <Row type="flex" justify="center">
                    <Button type="primary" @click="confirm">确定</Button>
                </Row>
                <!-- <Page :total="100" show-elevator /> -->
            </div>
        </Modal>
   </div>
</template>

<script>
    // 商品列表的接口
    import {goodsSelectManager} from 'api/goodsManager'
    import draggable from 'vuedraggable'
    export default {
        data(){
            return {
                // 商品列表的逻辑
                goodsManagerData: [],
                loading: false,
                modal2: false,
                goodsManagerCol: [
                    {
                        title: '编号',
                        align: 'center',
                        key: 'author_id',
                        width: 80,
                    },
                   {
                        title: '头像',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', {
                                style: {
                                    margin: '10px 0' 
                                }
                            }, [
                                h('img', {
                                    attrs: {
                                        width: 50,
                                        height: 50,
                                        src: params.row.author_portrait
                                    }
                                })
                            ])
                        }
                    },
                    {
                        title: '名称',
                        minWidth: 150,
                        key: 'author_name'
                    },
                    {
                        title: '推荐商品数',
                        width: 130,
                        key: 'recommendGoodsCount'
                    },
                    {
                        title: '操作',
                        width: 150,
                        render: (h, params) => {
                            
                            let selectIndex = this.goodsManagerSelect.findIndex(item => item.author_id == params.row.author_id)
                            let str = selectIndex >= 0 ? '取消' : '选择'
                            return h('Row', {}, [
                                h('Button', {
                                    props: {
                                        type: selectIndex >= 0 ? 'default' : 'primary',
                                        size: 'large'
                                    },
                                    on: {
                                        click: () => {
                                            let index = params.index
                                            if(selectIndex >= 0) {
                                                this.goodsManagerSelect.splice(selectIndex, 1)
                                            } else {
                                                this.goodsManagerSelect.push(this.goodsManagerData[index])
                                                if(this.selectNum && this.goodsManagerSelect.length > this.selectNum){
                                                    this.goodsManagerSelect = this.goodsManagerSelect.slice(1) 
                                                }
                                            }
                                            this.calTableHeight()
                                            // console.log(this.goodsManagerSelect)
                                        }
                                    }
                                }, str)
                            ])
                        }
                    }
                ],
                params: {
                    page: 1,
                    searchKeyword: ''
                },
                pageTotal: 1,

                closable: false,
                
                table_h: '',

                goodsManagerSelect: []
            }
        },
        props: {
            authorIdStr: {
                type: String,
                default: ''
            },
            selectNum: {
                type: [String, Number],
                default: 0
            }
        },
        created(){
            // 商品列表
            this.getGoodsManager()
        },
        mounted() {
            this.$nextTick(() => {
                this.calTableHeight()
                window.onresize = () => {
                    this.calTableHeight()
                }
            })
        },
        methods: {
            calTableHeight(){
                let h = this.goodsManagerSelect.length ? 85 : 0
                let win_h = window.innerHeight
                this.table_h = win_h - 200 - h - 67 - 16 - 36
            },
            // 商品列表
            getGoodsManager(){
                this.loading = true
                // goodsCenter().then(_data => console.log(_data))
                
                goodsSelectManager(this.params).then(_data => {
                    this.loading = false
                    this.goodsManagerData = _data.data.goodsAuthorData
                    this.initSelectData()
                    this.pageTotal = _data.data.lastPage
                    this.calTableHeight()
                })
            },
            pageChange(page){
                this.params.page = page
                this.loading = true
                this.getGoodsManager()
            },
            show(){
                this.modal2 = true
                this.loading = true
                this.getGoodsManager()
            },
            close(){
                this.modal2 = false
            },
            confirm(){
                this.$emit('goodsManager', this.goodsManagerSelect)
                this.close()
            },
          
            search(){
                this.params.page = 1
                this.getGoodsManager()
            },
            // 赋值选中的数据
            initSelectData(){
                this.goodsManagerSelect = []
                let arr = this.authorIdStr.split(',')
                arr.forEach(aid => {
                    aid = parseInt(aid)
                    let data = this.goodsManagerData.find(item => item.author_id == aid)
                    if(data){
                        this.goodsManagerSelect.push(data)
                    }
                })
            },
            removeOne(index){
                this.goodsManagerSelect.splice(index, 1)
                this.calTableHeight()
            },
        },
        components: {
            draggable
        },
        watch: {
           
        }
    }
</script>
<style>
.ivu-table-wrapper {
    /* border: 1px solid #dcdee2 !important; */
}
</style>
<style scoped lang="less">
    .goods-list-wrapper {
    }
    .goodsSelect-img{
        width: 50px;
        height: 50px;
        margin-right: 8px;
        border: 1px solid #e7e7e7;
        position: relative;
        cursor:move;
        .remove {
            display: block;
            position: absolute;
            top: 0;
            right: -2px;
            width: 15px;
            height: 15px;
            text-align: center;
            line-height: 1.1;
            cursor: pointer;
        }
    }
    .img-row{
        margin-bottom: 10px;
        padding-bottom: 10px;
        overflow-x: scroll
    }
    .table-header{
        padding: 0 24px;
    }
    .drag{
        display: flex
    }
</style>